<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				position: fixed;
				width: 100px;
				height: 100px;
				left: 0;
				top: 0;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<input id="input" type="text">
		<div class="box"></div>
		<script src="js/jquery.3.6.3.js"></script>
		<script>
			//键盘事件
			//键盘按下
			$("#input").keydown(function(e){
				// console.log("键盘按下",e.key);
			}).keyup(function(e){
				// console.log("键盘弹起",e.key);
			}).keypress(function(e){
				console.log("可打印字符",e.key);
			})
			
			var topVal = 0;
			var leftVal = 0;
			
			$("body").keydown(function(e){
				switch(e.key){
					case "w":
					case "W":
						topVal--;
						$(".box").css("top",topVal+"px");
						break;
					case "s":
					case "S":
						topVal++;
						$(".box").css("top",topVal+"px");
						break;
					case "a":
					case "A":
						leftVal--;
						$(".box").css("left",leftVal+"px");
						break;
					case "d":
					case "D":
						leftVal++;
						$(".box").css("left",leftVal+"px");
						break;
				}
			})
			
		</script>
	</body>
</html>